<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>通用促销</el-breadcrumb-item>
        <el-breadcrumb-item>砍价活动</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >
        <el-row class="search-input">
          <el-form-item label="活动名称：" prop="promName">
            <el-input v-model="filters.promName" placeholder="活动名称" clearable maxlength="80"></el-input>
          </el-form-item>
          <el-form-item label="活动ID：" prop="promotionCode">
            <el-input v-model="filters.promotionCode" placeholder="活动ID" clearable maxlength="80"></el-input>
          </el-form-item>
          <!-- <el-form-item label="活动类型：" prop="frontPromType">
            <el-select v-model="filters.frontPromType" placeholder="全部" clearable>
              <el-option
                v-for="item in frontPromTypes"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="创建人：" prop="creatorNameForSearch">
            <el-input
              v-model="filters.creatorNameForSearch"
              placeholder="创建人"
              clearable
              maxlength="80"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="渠道：" prop="channelId">
            <el-select v-model="filters.channelId" placeholder="全部" clearable>
              <el-option
                v-for="item in channelOption"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动商家：" prop="merchantId" v-if="false">
            <el-select
              v-model="filters.merchantId"
              placeholder="活动商家"
              @change="changeMerchant"
              clearable
            >
              <el-option
                v-for="item in merchantIds"
                :key="item.merchantId"
                :label="item.label"
                :value="item.merchantId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动店铺：" prop="storeId" v-if="false">
            <el-select v-model="filters.storeId" placeholder="活动店铺" clearable>
              <el-option
                v-for="item in storeIds"
                :key="item.storeId"
                :label="item.label"
                :value="item.storeId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-row class="times">
            <el-form-item label="活动时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion w211"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion w211"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="el-icon-refresh"
              :label="$t('action.reset')"
              class="resetButton"
              @click="resetForm('filters')"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              @click="getPromotionList()"
              class="searchButton"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              label="创建活动"
              @click="createPage()"
              perms="market:single:add"
              class="searchButton"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
          <keep-alive>
            <tab-pane
              v-if="activeName==item.key"
              :type="item.key"
              ref="child"
              :parentFilters="filters"
              v-on:SecondSell="SecondSell"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import marketRequest from "@/market/request/marketRequest";
import { front_prom_types, chanel_codes } from "@/market/dict/marketDict";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPaneSingle";
export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    var checkId = (rule, value, callback) => {
      if (value == null || typeof value == "undefined" || value == "") {
        callback();
      }
      var reg = /^[1-9]\d*$/;
      if (!reg.test(value)) {
        callback(new Error("请输入数字"));
      }
      callback();
    };
    return {
      channelOption:[],
      dataFormRules: {
      },
      tableData: [],
      templateTableDataSize: 0,
      dataForm: {
        id: null,
        promType: 1, //单一
        templateName: null,
        limit: 10,
        start: 1
      },
      useTempDialogVisible: false,
      flag: false,
      form: {
        region: ""
      },
      tabMapOptions: [
        { label: "全部", key: "-1" },
      ],
      activeName: "-1",
      createdTimes: 0,
      size: "small",
      filters: {
        promName: null,
        promotionCode: null,
        id: "",
        promType: 1, //单一促销
        frontPromType: "",
        channelCode: "",
        activityType: "",
        merchantId: "",
        creatorNameForSearch: null,
        startTime: "",
        endTime: "",
        storeId: "",
        type: "",
        t: "sysConfig",
        queryname: "",
        promotionCode: ""
      },
      frontPromTypes: this.getFrntPromType(),
      channelCodes: chanel_codes,
      activityTypes: [
        { activityType: "", label: "请选择" },
        { activityType: "0", label: "自建" },
        { activityType: "1", label: "报名" }
      ],
      merchantIds: [{ storeId: null, label: "请选择" }],
      storeIds: [{ storeId: null, label: "请选择" }],

      joinCheck: [],
      joinList: ["已使用用户", "未使用用户"],
      wayCheck: [],
      wayList: ["短信", "小程序", "网站", "H5", "邮件"],
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
    };
  },
  methods: {
    queryChannelListOther: function() {
      var this_ = this;
      this.utils.request.queryChannelListOther({}, function(res) {
        if (res.code == "0000") {
          this_.channelOption = res.data;
        }
      });
    },
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
    handleSizeChangeForTemplate(pageNum) {
      this.dataForm.limit = pageNum;
      this.tempPageQuery();
    },
    handleCurrentChangeForTemplate(pageSize) {
      this.dataForm.limit = 1;
      this.dataForm.start = pageSize;
      this.tempPageQuery();
    },
    // 使用模板
    useTemp() {
      this.tableData = [];
      this.useTempDialogVisible = true;
      this.tempPageQuery();
    },

    // 分页查询
    tempPageQuery() {
      let callback = res => {
        if (res.code == "0000") {
          this.tableData = res.data.rows;
          this.templateTableDataSize = res.data.total;
        } else {
          this.$message({ message: "查询失败", type: "fail" });
        }
      };
      this.utils.request.templatePageQuery(this.dataForm, callback);
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    getFrntPromType: function(row, column, cellValue, index) {
      return front_prom_types.filter(e => {
        return e.code == "sigle_front_prom_type";
      });
    },

    resetForm(formName) {
      //需要校验的keys
      let keys = [
        "endTime",
        "startTime",
        "creatorNameForSearch",
        "frontPromType",
        "promotionCode",
        "promName",
        "channelId"
      ];
      //调用校验
      let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys);
      if (!boo) {
        return;
      }
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
      this.$refs.child[0].listQuery.pageNo = 1;
      this.$refs.child[0].getList();
    },
    createPage() {
      this.$router.push("/BargainPromotionCreate" + "?auth=0&active=1");
    },
    getPromotionList() {
      this.$refs.child[0].listQuery.pageNo = 1;
      this.$refs.child[0].getList();
    },
    changeMerchant() {
      let this_ = this;
      this.utils.request.queryStoreList(
        { start: 1, limit: 10000000, merchantId: this.filters.merchantId },
        function(res) {
          if (res.code == "0000") {
            res.data.rows.forEach(item => {
              let store = {};
              store.storeId = item.id;
              store.label = item.storeName;
              this_.storeIds.push(store);
            });
          }
        }
      );
    },
    SecondSell() {
      this.flag = true;
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    //获取商家列表
    let this_ = this;
    this.utils.request.queryMerchantList(
      { start: 1, limit: 10000000 },
      function(res) {
        if (res.code == "0000") {
          res.data.rows.forEach(item => {
            let merchant = {};
            merchant.merchantId = item.id;
            merchant.label = item.name;
            this_.merchantIds.push(merchant);
          });
        }
      }
    );
    this.changeMerchant();
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {
    this.queryChannelListOther();
  }
};
</script>

<style scoped lang="scss">
.mb30{
  margin-bottom: 30px;
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  border-left: 1px solid #9b9da3 !important;
  &.is-active {
    border-color: #0090ff !important;
  }
}
.search-input{
  .times{
    .w211{
  width: 211px !important;
  /deep/ .el-input__inner{
    width: 211px !important;
  }
}
  }
}

</style>
